<template>
  <div>
    <el-row>
<!--      :offset偏右-->
        <el-col :span="1" :offset="11">
          <router-link to="/addBook"><el-button>添加</el-button></router-link>
      </el-col>
    </el-row>

  <el-table
    :data="pi.list"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="180">
    </el-table-column>

    <el-table-column
      type="index"
      width="180">
    </el-table-column>

    <el-table-column
      prop="name"
      label="图书编号"
      width="180">
    </el-table-column>

    <el-table-column
      label="作者">
      <template slot-scope="scope">
        <div style="color:red">{{scope.row.author}}</div>
      </template>
    </el-table-column>

    <el-table-column
      prop="price"
      label="价格">
    </el-table-column>

    <el-table-column
      label="操作">
      <template slot-scope="scope">
      <el-button type="danger" @click="updateBook(scope.row.id)">修改</el-button>
      <el-button type="danger" @click="deleteBook(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination
      layout="sizes, prev, pager, next, jumper, ->, total"
      :total="pi.total"
      :page-size.sync="pi.pageSize"
      :page-sizes="[2,5,10,40]"
      :current-page.sync="pi.pageNum"
      :pager-count="5"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background>
    </el-pagination>
  </div>
</template>

<script>
export default {
    name: "myTable",
      data() {
        return {
          pi:{},
          //pageSizes:[2,5,10,40],//每页显示条数候选值
          //pagerCount:9//最多显示9个页码，多余的会折叠
         }
      },
      created() {
        this.selectFyFz(1,5);
      },
      methods: {
        deleteBook(id) {
          if (confirm("是否确认删除")) {
          this.axios.delete("books/" + id).then((resp) => {
            this.selectFyFz(1, 5)
          });
        }
        },
        handleSizeChange(size) {//底层自动传来的数 条数
        this.selectFyFz(this.pi.pageNum,size)
        },
        handleCurrentChange(page) {//底层自动传来的数，页码
        this.selectFyFz(page,this.pi.pageSize)
        },
        selectFyFz(pageNum, pageSize) {
          this.axios.get("books/" + pageNum + "/" + pageSize).then((resp) => {
            this.pi = resp.data;
          });
        },
        updateBook(id){
          this.$router.push({path:"Gx",query:{id:id}})
        }
      }
}
</script>

<style scoped>

</style>
